<template>
  <el-dialog
    title="批量录入"
    :visible.sync="dialogVisible"
    width="1193px"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="content">
      <el-form label-width="80px" :model="rulesForm" ref="form">
        <el-row :gutter="24" v-for="(item, index) in accountList" :key="index">
          <el-col :span="1.5">
            <div class="user-box">用户{{ index + 1 }}</div>
          </el-col>
          <el-col :span="7">
            <el-form-item label="用户名" prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input v-model="rulesForm['userName'+ (index + 1)]" placeholder="请输入用户名" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="账号" prop="account" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
              <el-input v-model="rulesForm['account'+ (index + 1)]" placeholder="请输入账号" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6.9">
            <el-form-item label="成员分类" prop="postId" :rules="[{ required: true, message: '请选择成员分类', trigger: 'change' }]">
              <el-select v-model="rulesForm['postId'+ (index + 1)]" placeholder="请选择成员分类" style="width: 100%">
                <el-option
                  v-for="item in memberList"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="1.5">
              <div class="icon-box">
                <i class="el-icon-delete" @click="deleteUser(index)"></i>
                <i v-if="(index + 1) === accountList.length" class="el-icon-circle-plus-outline" style="margin-left: 5px" @click="addUser(index + 1)"></i>
              </div>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mixin} from "@/views/projectManage/mixin";

export default {
  name: "batchAccountInput",
  mixins: [mixin],
  data() {
    return {
      dialogVisible: false,
      accountList: ['用户1'],
      rulesForm: {},
    }
  },
  methods: {
    open() {
      this.getPostList()
      this.dialogVisible = true
    },
    // 删除账号
    deleteUser(index) {
      if (this.accountList.length === 1) return
      this.accountList.splice(index, 1)
    },
    // 添加账号
    addUser(index) {
      this.accountList.push('用户' + index)
    },
    handleClose() {
      this.$refs['form'].resetFields();
      this.rulesForm = {}
      this.dialogVisible = false
    },
    done() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  .user-box {
    width: 52px;
    height: 26px;
    line-height: 26px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #C50405;
    background: rgba(255, 213, 210, 0.35);
    margin-top: 5px;
  }
  .icon-box {
    padding-top: 5px;
    font-size: 20px;
    i {
      cursor: pointer;
    }
  }
}
</style>
